<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/laypage.css">

    <script src="js/vue/vue.min.js"></script>
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/laypage/laypage.js" charset="utf-8"></script>
    <script src="js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
<div id="app" class="container">
    ${Session["user"].userName}，欢迎你

    <form class="form-inline bg-danger" role="form">
        查询条件：
        <div class="form-group">
            <label class="sr-only" for="personname">用户名称</label>
            <input type="text" class="form-control" id="personname" placeholder="用户名称">
        </div>
        <div class="form-group">
            <label class="sr-only" for="userage">用户年龄</label>
            <input type="text" class="form-control" id="userage" placeholder="用户年龄">
        </div>
        <button type="button" id="findUser" class="btn btn-success">查询用户</button>
        <button type="button" id="addUserBtn" class="btn btn-danger">增加用户</button>
    </form>

    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr class="success">
                <td>用户</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr class="active" v-for="(item,index) in result">
                <td>{{item.pid}}</td>
                <td>{{item.personname}}</td>
                <td>{{item.personage}}</td>
                <td>{{item.persontel}}</td>
                <td>{{item.flate}}</td>
                <td><a href="#" @click="editEvent(item.id)">编辑</a>    <a href="#" @click="delEvent(item.id)">删除</a></td>
            </tr>
            </tbody>
            <tr>
                <td colspan="3"><div id="pagenav"></div></td>
            </tr>
        </table>

    </div>
</div>

<script >
        var app=new Vue({
            el:'#app',
            data:{
                result:[]
            }
        });

        var  getUserlist=function (curr) {
            $.ajax({
                type:'POST',
                dataType:'json',
                url:"/userlists",
                data:{
                    pageNum:curr||1,
                    pageSize:2,
                    personname:$("#personname").val(),
                },
                success:function (msg) {
                    app.result=msg.result;
                    laypage({
                        cont:'pagenav',
                        skip:true,
                        pages:msg.totalPage,
                        curr:curr||1,
                        jump:function (obj, first) {
                            if(!first){
                                getUserlist(obj.curr);
                            }
                        }
                    });
                }
            });
        }

        getUserlist();
</script>
</bodey>
</html>